<template>
  <div class="route-test-container">
    <h1>路由测试页面</h1>
    <p>点击下方链接测试路由功能：</p>
    
    <div class="route-links">
      <div class="route-group">
        <h2>基本路由</h2>
        <router-link to="/dashboard" class="route-link">仪表盘</router-link>
        <router-link to="/settings" class="route-link">系统设置</router-link>
        <router-link to="/profile" class="route-link">个人中心</router-link>
      </div>
      
      <div class="route-group">
        <h2>系统管理</h2>
        <router-link to="/system/user/list" class="route-link">用户管理</router-link>
        <router-link to="/system/dept/list" class="route-link">部门管理</router-link>
        <router-link to="/system/role/list" class="route-link">角色管理</router-link>
        <router-link to="/system/post/list" class="route-link">岗位管理</router-link>
        <router-link to="/system/menu/list" class="route-link">菜单管理</router-link>
        <router-link to="/system/log/list" class="route-link">日志管理</router-link>
        <router-link to="/system/org/list" class="route-link">组织架构</router-link>
      </div>
    </div>
    
    <div class="current-route-info">
      <h2>当前路由信息</h2>
      <p>当前路径: {{ currentPath }}</p>
      <p>路由名称: {{ currentRouteName }}</p>
      <p>认证状态: {{ isAuthenticated ? '已认证' : '未认证' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '../store/modules/user'

const route = useRoute()
const userStore = useUserStore()

const currentPath = computed(() => route.path)
const currentRouteName = computed(() => route.name || '未知')
const isAuthenticated = computed(() => userStore.isAuthenticated)
</script>

<style scoped>
.route-test-container {
  padding: 20px;
}

.route-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 20px 0;
}

.route-group {
  flex: 1;
  min-width: 250px;
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.route-link {
  display: block;
  padding: 8px 0;
  color: #646cff;
  text-decoration: none;
  transition: color 0.3s;
}

.route-link:hover {
  color: #535bf2;
  text-decoration: underline;
}

.current-route-info {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}
</style>